﻿<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-6">
      <div class="card card-accent-default">
        <div class="card-header">
          <i class="icon-note"></i> <strong>Angular 2 Input Mask</strong> - Text Mask
          <div class="card-actions">
            <a href="https://github.com/digitalBush/jquery.maskedinput"><small class="text-muted">docs</small></a>
          </div>
        </div>
        <div class="card-block">
          <fieldset class="form-group">
            <label>Date input</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
              <input type="text" class="form-control" [textMask]="{mask: dateMask}" [(ngModel)]="dateModel">
            </div>
            <small class="text-muted">ex. 99/99/9999</small>
          </fieldset>
          <fieldset class="form-group">
            <label>Phone input</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-phone"></i></span>
              <input type="text" class="form-control" [textMask]="{mask: phoneMask}" [(ngModel)]="phoneModel">
            </div>
            <small class="text-muted">ex. (999) 999-9999</small>
          </fieldset>
          <fieldset class="form-group">
            <label>Taxpayer Identification Numbers</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-usd"></i></span>
              <input type="text" class="form-control" [textMask]="{mask: taxMask}" [(ngModel)]="taxModel">
            </div>
            <small class="text-muted">ex. 99-9999999</small>
          </fieldset>
          <fieldset class="form-group">
            <label>Social Security Number</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-male"></i></span>
              <input type="text" class="form-control" [textMask]="{mask: ssnMask}" [(ngModel)]="ssnModel">
            </div>
            <small class="text-muted">ex. 999-99-9999</small>
          </fieldset>
          <fieldset class="form-group">
            <label>Eye Script</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-asterisk"></i></span>
              <input type="text" class="form-control" [textMask]="{mask: eyeScriptMask}" [(ngModel)]="eyeScriptModel">
            </div>
            <small class="text-muted">ex. ~9.99 ~9.99 999</small>
          </fieldset>
          <fieldset class="form-group">
            <label>Credit Card Number</label>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
              <input type="text" class="form-control" [textMask]="{mask: ccnMask}" [(ngModel)]="ccnModel">
            </div>
            <small class="text-muted">ex. 9999 9999 9999 9999</small>
          </fieldset>
        </div>
      </div>
    </div><!-- /.col -->
    <div class="col-md-6">
      <div class="card card-accent-default">
        <div class="card-header">
          <strong>Timepicker</strong>
          <small>A lightweight &amp; configurable timepicker directive</small>
        </div>
        <div class="card-block">
          <ngb-timepicker [(ngModel)]="time" [seconds]="seconds" [meridian]="meridian"></ngb-timepicker>
          <hr>

          <button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
            Meridian - {{meridian ? "ON" : "OFF"}}
          </button>
          <button class="btn btn-sm btn-outline-{{seconds ? 'success' : 'danger'}}" (click)="toggleSeconds()">
            Seconds - {{seconds ? "ON" : "OFF"}}
          </button>

          <hr>
          <pre>Selected time: {{time | json}}</pre>

        </div>
      </div>

      <div class="card card-accent-default">
        <div class="card-header">
          <strong>Datepicker</strong>
          <small>A lightweight &amp; configurable datepicker component</small>
        </div>
        <div class="card-block">
          <pre class="card card-block card-header">Selected date is: <em *ngIf="model">Model: {{ model | json }}</em></pre>
          <div style="display:inline-block; min-height:290px;">
            <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
          </div>

          <hr />
          <button type="button" class="btn btn-info" (click)="selectToday()">Today</button>
          <button type="button" class="btn btn-danger" (click)="dp.navigateTo()">To current month</button>
          <button type="button" class="btn btn-outline-secondary" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
        </div>
      </div>
    </div><!-- /.col -->
  </div><!-- /.row -->
</div>
